<!DOCTYPE html>
<html>
<head>
  <style>
    #container {
      transform: translateZ(0px);
      perspective: 400;
    }

    #revealed {
      position: absolute;
      left: 100px;
      height: 100px;
      width: 100px;
      background-color: green;
    }

    #animated {
      position: absolute;
      left: 100px;
      height: 100px;
      width: 100px;
      background-color: red;
      transform: translateZ(200px) translateX(-200px);
      transform-style: preserve-3d;
    }
   </style>
</head>
<body>
  <div id="container">
    <div id="revealed"></div>
    <div id="animated"></div>
  </div>
  <div id="result">
    PASS - Computed final position is correct.
  </div>
</body>
</html>
